<template>
  <div class="order" @scroll="handleScroll" ref="order">
    <van-nav-bar title="我的订单" left-arrow fixed @click-left="$router.back()" />

    <p class="header">
        <span :class="{activated:n===item.type}" @click="toggle(item.type)" v-for="(item,index) in names" :key="index">{{item.text}}</span>
      </p>

    <div class="list" v-if="list.length">
          <div class="item" v-for="item in list" :key="item.order_id">
            <p class="top">
                <span>{{item.create_time}}</span>
                <span>{{item.state_text}}</span>
            </p>
            <div class="goods" @click="$router.push(`/order/detail?orderId=${item.order_id}`)">
                <div class="goods-item" v-for="goods in item.goods" :key="goods.goods_id">
                    <div class="left">
                        <img :src="goods.goods_image">
                    </div>
                    <div class="middle">
                        <p>{{goods.goods_name}}</p>
                    </div>
                    <div class="right">
                        <p>￥{{goods.goods_price}}</p>
                        <p>x{{goods.total_num}}</p>
                    </div>
                </div>
            </div>
            <p class="total">
                <span>共{{item.goods?.length}}件商品，总金额：￥{{item.total_price}}</span>
            </p>
            <p class="handle">
                <button v-if="item.state_text!='待取消'" @click="goCancel(item.order_id)">申请取消</button>
            </p>
          </div>
      </div>

      <!-- 空页面 -->
    <div class="empty" v-else>
      <img src="@/assets/empty.png">
      <p>亲，暂无订单记录</p>
    </div>

    <!-- 没数据提示 -->
    <p class="more-tip" v-if="noMore">亲，没有更多了</p>

    <!-- 一键返回顶部按钮 -->
    <div class="switch-top" v-show="showBackToTop" @click="goTop">
      <img src="https://www.mescroll.com/img/mescroll-totop.png">
    </div>

  </div>
</template>

<script>

import { Toast } from 'vant'
import { getOrderList, CancelOrder } from '@/api/order'

export default {
  data () {
    return {
      list: [],
      names: [
        {
          type: 'all',
          text: '全部'
        },
        {
          type: 'payment',
          text: '待支付'
        },
        {
          type: 'delivery',
          text: '待发货'
        },
        {
          type: 'received',
          text: '待收货'
        },
        {
          type: 'comment',
          text: '待评价'
        }
      ],
      n: null,
      page: 1,
      pageNum: 1,
      noMore: false,
      showBackToTop: false
    }
  },
  async created () {
    this.getFirstPage(this.defaultDataType)
  },
  computed: {
    defaultDataType () {
      return this.$route.query.dataType ? this.$route.query.dataType : 'all'
    }
  },
  methods: {
    async getFirstPage (dataType) {
      this.noMore = false
      this.n = dataType
      const { data: { list } } = await getOrderList({ dataType: dataType, page: 1 })
      this.list = list.data
      this.pageNum = list.last_page
    },
    async toggle (dataType) {
      this.getFirstPage(dataType)
    },
    async cancel (obj) {
      const { message } = await CancelOrder(obj)
      setTimeout(() => {
        Toast(message)
      }, 200)
      this.getFirstPage(this.n)
    },
    goCancel (orderId) {
      this.$dialog.confirm({
        title: '温馨提示',
        message: '确定要取消该订单吗'
      }).then(() => {
        this.cancel({ orderId })
      }).catch(() => {})
    },
    async handleScroll (e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target
      this.showBackToTop = Boolean(scrollTop > 500)
      if (scrollTop + clientHeight >= scrollHeight - 50) {
        if (this.page >= this.pageNum) {
          return true
        }
        this.page++
        const { data: { list } } = await getOrderList({ dataType: this.n, page: this.page })
        this.list = this.list.concat(list.data)

        if (this.pageNum === this.page) {
          this.noMore = true
        }
      }
    },
    goTop () {
      this.$refs.order.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }
}
</script>

<style lang="less" scoped>

.order {
 padding-top: 46px;
 padding-bottom: 10px;
 height: 611px;
 overflow-y: auto;
}

.van-nav-bar {
    ::v-deep .van-nav-bar__title {
    font-weight: bold;
  }

    ::v-deep .van-icon-arrow-left {
        color: black;
    }
}

.header {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
    background-color: white;

    span {
      padding: 5px;
      font-size: 15px;
      color: rgb(48, 49, 51);
    }

    .activated {
      font-weight: bold;
      color: rgb(250, 34, 9);
      border-bottom: 3px solid rgb(250, 34, 9);
    }
  }

.list {
    .item {
        background-color: white;
        width: 322px;
        padding: 15px;
        margin: 10px auto;
        font-size: 13px;

        .top {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;

            span:first-child {
                color: #777;
            }

            span:last-child {
                color: red;
            }
        }

        .goods {
            .goods-item {
                height: 90px;
                width: 322px;
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;

                .left {
                    height: 90px;
                    width: 90px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .middle {
                    width: 149px;

                    p {
                        line-height: 1.3;
                        white-space: normal;
                        color: #484848;
                        font-size: 13px;
                        display: -webkit-box;  /* 兼容旧版浏览器 */
                        -webkit-line-clamp: 2;   /* 显示两行 */
                        -webkit-box-orient: vertical;    /* 子元素在垂直方向排列 */
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                .right {
                    width: 75px;
                    text-align: right;
                    color: #777;
                }
            }
        }

        .total {
            text-align: right;
            margin-bottom: 10px;
        }

        .handle {
            text-align: right;

            button {
                width: 76px;
                height: 25px;
                background-color: white;
                border: 0.5px solid #a8a8a8;
                border-radius: 5px;
            }
        }
    }
}

.empty {
  width: 325px;
  height: 197px;
  padding: 90px 25px;
  text-align: center;

  img {
    width: 140px;
    height: 92px;
  }

  p {
    font-size: 14px;
    color: grey;
    margin: 37px 0;
  }

  div {
    width: 110px;
    margin: 0 auto;
    font-size: 16px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    border-radius: 37px;
    background: linear-gradient(90deg, #f9211c, #ff6335)
  }
}

.more-tip {
  font-size: 14px;
  color: grey;
  padding: 10px;
  margin: 0 auto;
  text-align: center;
}

.switch-top {
  position: absolute;
  bottom: 50px;
  right: 10px;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
  }
}

</style>
